<template>
  <div class="common-layout">
     <el-container style="height: 100%;">
       <el-header>
         <el-row>
           <el-col :span="12" style="font-size: 20px;color:aquamarine" > <h1>爱吃兔溯源</h1></el-col>
           <el-col :span="12" style="font-size: 15px;text-align:right;" >
             <el-icon><User /></el-icon>
             <el-icon><SwitchButton /></el-icon>
            登录人 : 张天 &nbsp;&nbsp;角色 : 管理员&nbsp;&nbsp;
           <el-button type="danger" @click="nextTo">退出登录</el-button>
         </el-col>
         </el-row>
       </el-header>
       <el-container style="height: 100%;">
         <el-aside width="250px">
    <el-row class="tac">
     <el-col :span="14">
       <el-menu
         style="height: 937px;width:250px"
         active-text-color="#ffd04b"
         background-color="#545c64"
         class="el-menu-vertical-demo"
         default-active="router.push"
         text-color="#fff"
         router
       >
         <el-sub-menu index="/Product">
           <template #title>
             <el-icon><location /></el-icon>
             <span>爱吃兔溯源管理</span>
           </template>
           <el-sub-menu index="/Product">
             <template #title>溯源管理</template>
             <el-menu-item index="/ProductView">新增/修改</el-menu-item>
             <el-menu-item index="/ProductView">导出设置</el-menu-item>
           </el-sub-menu>
           <el-sub-menu index="/BreeView">
             <template #title>养殖信息</template>
             <el-menu-item index="/BreeView">养殖信息-设置养殖信息</el-menu-item>
             <el-menu-item index="1-2-1">养殖信息-设置企业信息</el-menu-item>
           </el-sub-menu>
           <el-sub-menu index="1-3">
             <template #title>屠宰信息</template>
             <el-menu-item index="1-3-1">屠宰信息-设置屠宰信息</el-menu-item>
             <el-menu-item index="1-3-2">屠宰信息-设置企业信息</el-menu-item>
           </el-sub-menu>
           <el-sub-menu index="1-4">
             <template #title>深加工信息</template>
             <el-menu-item index="1-4-1">深加工信息-设置深加工信息</el-menu-item>
             <el-menu-item index="1-4-2">深加工信息-设置供应商信息</el-menu-item>
             <el-menu-item index="1-4-3">深加工信息-设置企业信息</el-menu-item>
           </el-sub-menu>
         </el-sub-menu>
         <el-menu-item index="2">
           <el-icon><icon-menu /></el-icon>
           <span>天天天天</span>
         </el-menu-item>
         <el-menu-item index="4">
           <el-icon><setting /></el-icon>
           <span>设置</span>
         </el-menu-item>
       </el-menu>
     </el-col>
 
    </el-row>
         </el-aside>
         <el-main style="height: calc(100vh - 64px); overflow-y: auto;"><RouterView /></el-main>
       </el-container>
     </el-container>
   </div>
 
 </template>
 
 <script setup lang="ts">
 import {ref} from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from '../components/HelloWorld.vue'
 import { useCounterStore } from '@/stores/counter'
 const store=useCounterStore();
 import {
   Document,
   Menu as IconMenu,
   Location,
   Setting,
 } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router';
 
 const router=useRouter();
 
 
 
 const nextTo=()=>{
   router.push({
     name:'Login'
   })
 }
 
 
 
 </script>
 
 
 <style scoped>
 .el-header {
   height: 60px;
   line-height: 60px;
   background-color:rgb(49, 99, 142);
   color: rgb(186, 173, 173);
 }
 .el-icon{
   height: 60px;
   line-height: 60px;
 }
 .el-main{
   /* 页边距 */
   padding: 0px;
 }
 
 
 
 
 </style>
 